<template>
    <el-row :gutter="20">
        <el-col>
            <el-card shadow="hover" class="mgb20">
                <div class="user-info">
                    <img src="/#{static}/images/head.jpg" class="user-avator" alt="" />
                    <div class="user-info-cont">
                        <div class="user-info-name">管理员</div>
                        <div>欢迎管理员进入后台管理</div>
                    </div>
                </div>
                <div class="user-info-list">
                    上次登录时间：
                    <span>2025-01-01 12:30</span>
                </div>
                <div class="user-info-list">
                    上次登录地点：
                    <span>北京</span>
                </div>
            </el-card>
            <el-card shadow="hover" style="height: 252px">
                <div slot="header" class="clearfix">
                    <span>进度情况</span>
                </div>
                一般
                <el-progress :percentage="71.3" color="#42b983"></el-progress>
                重要
                <el-progress :percentage="24.1" color="#f1e05a"></el-progress>
                紧急
                <el-progress :percentage="13.7"></el-progress>
                次要
                <el-progress :percentage="5.9" color="#f56c6c"></el-progress>
            </el-card>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup></script>
<style lang="less" scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 20px;
    line-height: 28px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}
</style>
